<template>
    <div>
        <input type="button" class="buttonStyle" value="+" @click="onClickIncrementButton"/>
        <input type="button" class="buttonStyle"  value="-" @click="onClickDecrementButton" />
        <span>{{caption}}Count：{{initValue}}</span>
    </div>
</template>
<script>
export default {
  props: {
    caption: String,
    initValue: Number
  },
  methods: {
    onClickIncrementButton() {
      this.$emit('onUpdate',this.initValue + 1);
    },
    onClickDecrementButton() {
      this.$emit('onUpdate',this.initValue - 1);
    }
  }
};
</script>
<style scoped>
.buttonStyle {
  background-color: #0099aa;
}
</style>



